import React, { useState } from 'react';
import { Layout, Tabs, List, Card, Badge } from 'antd';
import { ClockCircleOutlined, CheckCircleOutlined, SendOutlined } from '@ant-design/icons';
import TodoDetail from './components/TodoDetail';
import TodoTabs from './components/TodoTabs';

const { Sider, Content } = Layout;

const mockTodoData = [
  {
    id: 1,
    title: '商品信息待审批',
    status: 'pending',
    type: 'product',
    createTime: '2025-01-14 09:30:00',
    creator: '张三',
    description: '新商品信息需要审批',
    productInfo: {
      code: 'TD5F42080009',
      name: '这是商品名称11',
      enName: 'Product Name',
      shortName: '商品简称',
      categoryCode: '420804',
      categoryName: '婴童玩具启蒙/积木/积木周边',
      materialType: '标准成品',
      brand: 'bckid'
    }
  }
];

const mockDoneData = [
  {
    id: 2,
    title: '营销活动审批',
    status: 'done',
    type: 'marketing',
    createTime: '2025-01-13 15:30:00',
    creator: '李四',
    description: '618营销活动方案审批',
  }
];

const mockMyData = [
  {
    id: 3,
    title: '新品上架申请',
    status: 'pending',
    type: 'product',
    createTime: '2025-01-14 08:00:00',
    creator: '我',
    description: '新品上架流程申请',
  }
];

const TodoList = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const [showDetail, setShowDetail] = useState(false);

  const handleItemClick = (item) => {
    setSelectedItem(item);
    setShowDetail(true);
  };

  const renderListItem = (item) => (
    <List.Item 
      key={item.id}
      onClick={() => handleItemClick(item)}
      style={{ cursor: 'pointer' }}
    >
      <Card 
        size="small" 
        style={{ width: '100%' }}
        hoverable
      >
        <div style={{ fontSize: '14px', marginBottom: '8px' }}>{item.title}</div>
        <div style={{ fontSize: '12px', color: '#666' }}>
          <div>创建时间：{item.createTime}</div>
          <div>创建人：{item.creator}</div>
        </div>
      </Card>
    </List.Item>
  );

  const renderDetail = () => {
    if (!selectedItem) return null;

    return (
      <div style={{ padding: '16px', backgroundColor: '#fff' }}>
        <TodoDetail data={selectedItem} />
        <TodoTabs />
      </div>
    );
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={300} theme="light" style={{ borderRight: '1px solid #f0f0f0' }}>
        <Tabs 
          defaultActiveKey="1" 
          style={{ padding: '0 4px' }}
          tabBarStyle={{
            fontSize: '12px',
            margin: 0
          }}
          items={[
            {
              key: '1',
              label: (
                <span style={{ display: 'inline-flex', alignItems: 'center', fontSize: '12px' }}>
                  <ClockCircleOutlined style={{ marginRight: 2 }} />
                  <span>待办</span>
                  <Badge 
                    count={mockTodoData.length} 
                    style={{ 
                      marginLeft: 4,
                      backgroundColor: '#ff4d4f',
                      transform: 'scale(0.8)',
                      transformOrigin: 'left'
                    }}
                  />
                </span>
              ),
              children: (
                <List
                  dataSource={mockTodoData}
                  renderItem={renderListItem}
                  style={{ marginTop: '16px' }}
                />
              )
            },
            {
              key: '2',
              label: (
                <span style={{ display: 'inline-flex', alignItems: 'center', fontSize: '12px' }}>
                  <CheckCircleOutlined style={{ marginRight: 2 }} />
                  <span>已办</span>
                  <Badge 
                    count={mockDoneData.length} 
                    style={{ 
                      marginLeft: 4,
                      backgroundColor: '#ff4d4f',
                      transform: 'scale(0.8)',
                      transformOrigin: 'left'
                    }}
                  />
                </span>
              ),
              children: (
                <List
                  dataSource={mockDoneData}
                  renderItem={renderListItem}
                  style={{ marginTop: '16px' }}
                />
              )
            },
            {
              key: '3',
              label: (
                <span style={{ display: 'inline-flex', alignItems: 'center', fontSize: '12px' }}>
                  <SendOutlined style={{ marginRight: 2 }} />
                  <span>我发起的</span>
                  <Badge 
                    count={mockMyData.length} 
                    style={{ 
                      marginLeft: 4,
                      backgroundColor: '#ff4d4f',
                      transform: 'scale(0.8)',
                      transformOrigin: 'left'
                    }}
                  />
                </span>
              ),
              children: (
                <List
                  dataSource={mockMyData}
                  renderItem={renderListItem}
                  style={{ marginTop: '16px' }}
                />
              )
            }
          ]}
        />
      </Sider>
      <Content style={{ backgroundColor: '#f0f2f5' }}>
        {showDetail ? renderDetail() : (
          <div style={{ textAlign: 'center', color: '#999', marginTop: '40vh' }}>
            请选择一个待办事项查看详情
          </div>
        )}
      </Content>
    </Layout>
  );
};

export default TodoList;
